import 'braft-editor/dist/index.css'
import BraftEditor, { EditorState } from 'braft-editor'
import { useState } from 'react'
type BraftProps = {}

export const Braft = (props: BraftProps) => {
 const [editorState, setEditirState] = useState<EditorState>(BraftEditor.createEditorState('<div></div>'))
 const handleChange = (editorState: EditorState) => {
     console.log(editorState)
     setEditirState(editorState)
 }
 return (
     <>
         <h1>富文本编辑器</h1>
         <BraftEditor
             style={{ width: '100%', height: 400 }}
             value={editorState}
             onChange={handleChange}
         />
         <hr />
         {
             // 将此数据 存放于数据库
             editorState.toHTML()
         }
         <div>预览</div>
         {/* 从数据库提取出来以此种方法渲染 */}
         <div dangerouslySetInnerHTML={{ __html: editorState.toHTML() }}></div>
     </>
 );
}